<template>
  <div class="multiple-charts-container">
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <day-details />
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <hour-details />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <bar-stack />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <bar-stack />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DayDetails from './components/DayDetails'
import HourDetails from './components/HourDetails'
import BarStack from './components/BarStack'

export default {
  name: 'MultipleCharts',
  components: {
    DayDetails,
    HourDetails,
    BarStack
  },
  data() {
    return {
      radio: '天'
    }
  }
}
</script>

<style scoped>
.multiple-charts-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
  position: relative;
}
</style>
